<template>
	<div class="cart">
		<h3 style="position: absolute;top: 70px;left: 70px;">我的购物车清单</h3>
		<hr style="position: absolute;top: 120px;border-color: gainsboro;width: 95%;margin-left: 2.5%;" />
		<div style="position: absolute;top: 150px;width: 95%;margin-left: 2.5%;">
			<el-table :data="newList">
				<el-table-column label="图片" width="150">
					<template #default="scope">
						<img :src="`${$Imgurl}/api/public/showImg/${scope.row.pic}`"/>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="商品名称"  />
				<el-table-column prop="price" label="商品价钱" />
				<el-table-column label="商品数量">
					<template #default="scope">
							<el-input-number :min="1" :max="10" controls-position="right" v-model="scope.row.num" />
					</template>
				</el-table-column>
				<el-table-column label="商品总价" >
					<template #default="scope">
						{{scope.row.num * scope.row.price}}
					</template>
				</el-table-column>
				<el-table-column label="复选框" >
					<template #default="scope">
						<el-checkbox v-model="scope.row.checked" ></el-checkbox>
					</template>
				</el-table-column>
				<el-table-column prop="bookid" label="编号" />
			</el-table>
			<div class="box_bottom">
				<el-tag>总价钱:</el-tag>{{getSum}}
				<hr>
				<el-button type="warning" @click="toMake()">去下单</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import { Search } from '@element-plus/icons-vue';
	// 引入token
	import instance from '../../../ajax/index.js';
	export default{
		name : 'Cart',
		data(){
			return {
				list : [],
				newList : [],
				tomakeList : []
			}
		},
		computed : {
			getSum(){
				let sum = 0;
				for( let i in this.newList ){
					if( this.newList[i].checked ){
						sum += (this.newList[i].num * this.newList[i].price);
					}
				}
				return sum;
			}
		},
		methods:{
			toMake(){
				// console.log( this.getSum );
				if( this.getSum != 0 ){
					for( let i in this.newList ){
						if( this.newList[i].checked ){
							this.tomakeList.push( this.newList[i] );
							// console.log( this.tomakeList );
							this.$store.state.tomake.push( this.newList[i] );
							// console.log( this.$store.state.tomake );
						}
					}
					this.$message.success({
						message:"下单成功"
					})
					this.$router.push( '/home/make' );
				}else{
					return false;
				}
				
			}
		},
		created(){
			// http://127.0.0.1:8093/api/fore/cart/findAll
			// http://127.0.0.1:8093/api/public/type/findAll2
			instance.get( 'http://127.0.0.1:8093/api/fore/cart/findAll' ).then( (res)=>{
				// console.log(res.data.data);
				this.list = res.data.data
				for( let i in this.list ){
					// console.log(this.list[i].cart,this.list[i].book);
					let c = {};
					c.pic = this.list[i].book.picture;
					c.name = this.list[i].book.name;
					c.price = this.list[i].book.price;
					c.num = this.list[i].cart.num;
					c.bookid = this.list[i].cart.bookid;
					this.newList.push( c );
				}
				// console.log(this.newList);
				// this.list = res.data.data
			} ).catch( (error)=>{
				console.log(error);
			} )
		}
	}
</script>

<style scoped>
	.el-table{
		width: 95%;
		text-align: center;
		/* position: absolute; */
		/* top: 150px; */
		margin-left: 2.5%;
		border: 1px solid gainsboro;
	}
	img{
		height: 80px;
		vertical-align: middle;
	}
	.el-tag{
		width: 5%;
		height: 50px;
		line-height: 50px;
		margin-left: 2%;
		margin-right: 1%;
		display: flex;
		background-color: #ecf5ff;
		color: #88a9ff;
		border: 1px solid skyblue;
		font-size: 18px;
		text-indent: 0.5em;
		float: left;
	}
	.box_bottom{
		width: 100%;
		height: 50px;
		line-height: 50px;
		margin-top: 15px;
		margin-left: 10px;
		/* position: absolute; */
		/* top: 1000px; */
		float: left;
	}
	.el-button{
		margin-left: 2%;
	}
	/* .el-container{
		width: 100%;
		/* text-align: center; */
		/* line-height: 100%; */
	/* } */
	/* .el-header{ */
		/* text-align: center; */
		/* line-height: 60px; */
		/* background: pink; */
	/* } */
	/* .el-aside{ */
		/* text-align: center; */
		/* width: 25%; */
		/* background-color: #ffff7f; */
	/* }/ */
	/* .el-container:nth-child(1) .el-aside{ */
		/* line-height: 116px; */
	/* } */
	/* .el-container:nth-child(6) .el-aside{ */
		/* line-height: 176px; */
	/* } */
	/* .el-main{ */
		/* text-align: center; */
		/* line-height: 100%; */
		/* background-color: #aaaaff; */
	/* } */
	/* .el-footer{ */
		/* text-align: center; */
		/* line-height: 60px; */
		/* background-color: skyblue; */
	/* }/ */
	/* .block{
		width: 24%;
		float: right;
	}
	.cart{
		border: 1px solid black;
	} */ 
</style>
